<template>
  <pageIndexBanner v-if="property.banner" />
  <pageIndexNew
    v-if="property.newArrivals && property.newArrivals.content.length"
    :compInfo="property.newArrivals"
  />
  <pageIndexProcess v-if="property.article1" :article1="property.article1" />
  <PageIndexCertification v-if="property.certification" :certification="property.certification" />
  <pageIndexDigital v-if="property.logo" :compInfo="property.logo" />
  <pageIndexDigital v-if="property.digital" :compInfo="property.digital" />
  <pageIndexBannerImg v-if="typeof property.bannerImg === 'object' && property.bannerImg.length" :compInfo="property.bannerImg" />
  <PageAboutVideo v-if="property.promotion" :Promotion="property.promotion" />
  <PageAboutCompany :map="property.map" />
  <pageDetailControl />
  <!-- <pageIndexMap /> -->
</template>
<script lang="ts" setup>
import type { TPromotion } from "~/components/page/about/type";
type Tseo = {
  headTag: string;
  keyword: string;
  mainKeyword: string;
  meta: string;
};
type TnewArrivals = {
  title: string;
  content: {
    img: string;
    pathUrl: string;
    title: string;
  }[];
};
type Tproper = {
  banner: boolean;
  logo: string;
  bannerImg: string[];
  newArrivals: TnewArrivals;
  article1: number;
  certification: {
    title: string;
    src: string;
  };
  map: {
    title: string;
    src: string;
  };
  digital: string;
  promotion: {
    title: string;
    list: TPromotion[];
  };
};
type Tpage = {
  name: string;
  seoDTO: Tseo;
  property: Tproper;
};
let property = ref<Tproper>({
  banner: false,
  bannerImg: [],
  logo: "",
  newArrivals: {
    title: "NEW ARRIVALS RECOMMENDATION",
    content: [],
  },
  article1: 0,
  certification: {
    title: "",
    src: "",
  },
  map: {
    title: "",
    src: "",
  },
  digital: "",
  promotion: {
    title: "",
    list: [],
  },
});
const getPage = async () => {
  const { data } = (await useServerFetch<Tpage>("/app-api/promotion/diy-page/getByCode", {
    method: "get",
    query: {
      code: "home",
    },
  })) as { data: Tpage };
  property.value = data?.property;
  useHead({
    title: data?.name,
    meta: [
      {
        hid: data?.seoDTO?.keyword,
        name: data?.seoDTO?.mainKeyword,
        content: data?.seoDTO?.meta,
      },
    ],
  });
};
onMounted(() => {
  getPage();
});
</script>
